<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="mybean.data.DataByPage" %>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.rowset.*" %>
<jsp:useBean id="loginBean" class="mybean.data.login" scope="session"/>
<jsp:useBean id="dataBean" class="mybean.data.DataByPage" scope="session"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>单车空间</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index-2.css">
	<link rel="stylesheet" type="text/css" href="css/index-1.css">
	<style type="text/css">           
      /*搜索框*/
	.box{
    	height: 50px;                
 	}
	.search{
   	 	width: 350px;
    	height: 30px;
    	border-radius: 15px;
   		margin: 10px 0;
    	background: url(pictures/search.ico) no-repeat;/*这个样式要放在这里才能显示出图片*/
    	background-color: white;
    	background-position: 3px;
    	padding-left: 30px;
    	border: 1px solid black;
    	outline: none;
	}
    </style>
</head>
<body>
	<div class="homepage-header public-header ">
		<img src="pictures/logo.jpg" class="borrow-logo">		    			
		<ul class="borrow-header-bar">
			<li style="color: white">单车空间</li>
			<li><a href="homepage.jsp">首页</a></li>
			
			<li class="font-color">选择地区:</li>
			<form action="queryServlet" method="post">			
				<select class="borrow-place" name="distract">
			<!-- 根据数据库生成下拉选项 -->
			<%
			if(loginBean==null){
				out.println("<script language = javascript>alert('请重新登录!');");
				out.println("location.href='index.jsp'</script>");
				return;
			}
			else{
				boolean b=loginBean.getLogname()==null || loginBean.getLogname().length()==0;
				if(b){
					out.println("<script language = javascript>alert('请重新登录!');");
					out.println("location.href='index.jsp'</script>");
					return;
				}
			}		
			try {//加载驱动
    			Class.forName("com.mysql.cj.jdbc.Driver");
    		 }
    		catch(Exception e) {}
			String url = "jdbc:mysql://127.0.0.1:3306/bike?&useSSL=false&serverTimezone=GMT%2B8";
			Connection con;
         	Statement sql;
         	ResultSet rs;         //两个表连接，再查询
         	String condition = "select bike.*,Pname, Dname FROM bike,district,provider where bike.B_district = district.Dno and bike.B_provider = provider.Pno GROUP BY bike.B_id";
         	try {//连接数据库
    			con = DriverManager.getConnection(url,"root","744615");
    			sql=con.createStatement();
    			//获得有单车的地区
    			rs = sql.executeQuery(condition);   	
				while(rs.next()){
					String district=rs.getString("Dname");%>  <!--获取有单车的地区作为可选项-->
				<option value="<%=district %>" selected="selected"><%=district %></option>
			<%}
					con.close();
				}
     			catch(SQLException e) {out.print(e);}
         	%>
         		</select>
         		&nbsp;&nbsp;
         		<input type="submit" name="submit" value="查询" class="submit">
         	</form>
		</ul>
	</div>
	<!-- 这里是选择地区后导出的关于空闲单车的表，用户可以对单车的状态进行修改，进行借车 可以用table-->
	<div class="borrow-content">
	<center>
		<form action="SearchByConditonServlet" method="post">
			<div class="box">
            	<input type="text" name="searchMess" class="search" value="搜索"/>
            	<input type="submit" name="submit" value="搜索" class="submit">
        	</div><br>
        	<input type="radio"  name="radio" value="B_id" >单车编号
			<input type="radio"  name="radio" value="B_memo" >可用的单车
			<input type="radio"  name="radio" value="price">单车价格			
		</form>
		<br><br>
		<div class="tooltip" style="color: #004b97">搜索内容提示
  			<span class="tooltiptext">
  			<p>1、输入单车编号查找</p><p>2、输入“空闲”或直接点击可用的单车查找可用的车</p><p>3、按价格查找输入价格范围，如0-5</p></span>
		</div>
	</center>	
	</div>
			
	<!--所以的页面底部都一样，用一个文本文件存储，所有JSP文件使用嵌入-->
	<%@ include file="footer.txt" %>
</body>
</html>